import React, { useState, useEffect, useCallback, FC } from 'react'
import './index.less'
import { getKeyName, flattenRoutes } from '@/assets/js/publicFunc'
import { connect } from 'react-redux'
import * as actions from '@/store/actions'
import { Breadcrumb, Layout, Menu } from 'antd';
import { Link, } from 'react-router-dom'
import Header from '@/components/common/header'
import { HashRouter as Router, Route } from 'react-router-dom'
import CleanRole from '@/pages/cleanFusion/cleanRole'
import DataIntegration from '@/pages/cleanFusion/dataIntegration'
import DataTemplate from '@/pages/cleanFusion/dataTemplate'
import dataIntegration from './dataIntegration'
import dataTemplate from './dataTemplate'
import moment from 'moment'


const { Content, Footer, Sider } = Layout;
interface Props extends ReduxProps { }
const CleanFusion: FC<Props> = () => {

    return (
        <>
            {
                process.env.NODE_ENV == 'development'?<div style={{ width: '100%',height:'100%'}}>
                    <Layout className="layout">
                    <Sider >
                        <div className="cflogo" />
                        <Menu mode="inline">
                            <Menu.SubMenu title="清洗融合">
                                <Menu.Item><Link to={'/cleanFusion/cleanRole'}>清洗规则管理</Link></Menu.Item>
                                <Menu.Item><Link to={'/cleanFusion/dataIntegration'}>数据集成管理</Link></Menu.Item>
                                <Menu.Item><Link to={'/cleanFusion/dataTemplate'}>数据模板</Link></Menu.Item>
                            </Menu.SubMenu>
                        </Menu>
                    </Sider>
                    <Layout className="site-layout">
                        <Header />
                        <Content
                            className="site-layout-background"
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                minHeight: 280,
                            }}
                        >
                           <Router>
                                <Route  path="/cleanFusion/cleanRole" component={CleanRole} />
                                <Route  path="/cleanFusion/dataIntegration" component={dataIntegration} />
                                <Route  path="/cleanFusion/dataTemplate" component={dataTemplate} />
                            </Router>
                        </Content>
                    </Layout>
                </Layout>
            </div>:
                <div style={{ width: '100%',overflowY:'auto'}}>
            <div style={{padding:'15px'}}>
                    <Router>
                        <Route  path="/cleanFusion/cleanRole" component={CleanRole} />
                        <Route  path="/cleanFusion/dataIntegration" component={dataIntegration} />
                        <Route  path="/cleanFusion/dataTemplate" component={dataTemplate} />
                    </Router>
                </div>
                </div>
            }
        </>
        

    )
}


export default connect(
    (state) => state,
    actions
)(CleanFusion)


